<template>
	<view class="test-page">
		<Navbar title="3D文字旋转测试" />

		<view class="test-content">
			<!-- 基础3D旋转效果 -->
			<view class="test-section">
				<text class="section-title">基础3D旋转效果</text>
				<view class="test-area">
					<view class="transform-container">
						<text 
							class="text-3d-rotate" 
							:style="transformStyle"
							@touchstart="handleTouchStart"
							@touchmove="handleTouchMove"
							@touchend="handleTouchEnd"
						>
							3D旋转文字
						</text>
					</view>
					
					<!-- 旋转角度控制 -->
					<view class="rotation-controls">
						<view class="control-item">
							<view class="control-label">
								<text class="label-text">X轴旋转</text>
								<text class="angle-value">{{ transformState.rotateX }}°</text>
							</view>
							<slider 
								:value="transformState.rotateX" 
								@change="onRotateXChange"
								min="-180" 
								max="180" 
								step="1"
								activeColor="#4fd2ff"
								backgroundColor="#1a2a5a"
								blockColor="#4fd2ff"
								blockSize="20"
								class="rotation-slider"
							/>
						</view>
						
						<view class="control-item">
							<view class="control-label">
								<text class="label-text">Y轴旋转</text>
								<text class="angle-value">{{ transformState.rotateY }}°</text>
							</view>
							<slider 
								:value="transformState.rotateY" 
								@change="onRotateYChange"
								min="-180" 
								max="180" 
								step="1"
								activeColor="#ff6b6b"
								backgroundColor="#1a2a5a"
								blockColor="#ff6b6b"
								blockSize="20"
								class="rotation-slider"
							/>
						</view>
						
						<view class="control-item">
							<view class="control-label">
								<text class="label-text">Z轴旋转</text>
								<text class="angle-value">{{ transformState.rotateZ }}°</text>
							</view>
							<slider 
								:value="transformState.rotateZ" 
								@change="onRotateZChange"
								min="-180" 
								max="180" 
								step="1"
								activeColor="#a29bfe"
								backgroundColor="#1a2a5a"
								blockColor="#a29bfe"
								blockSize="20"
								class="rotation-slider"
							/>
						</view>
					</view>
					
					<!-- 快速控制按钮 -->
					<view class="transform-controls">
						<button @click="rotateX" class="control-btn">X轴+45°</button>
						<button @click="rotateY" class="control-btn">Y轴+45°</button>
						<button @click="rotateZ" class="control-btn">Z轴+45°</button>
						<button @click="resetTransform" class="control-btn">重置</button>
					</view>
					
					<!-- 代码显示 -->
					<view class="code-display">
						<text class="code-title">当前CSS代码：</text>
						<view class="code-content">
							<text class="code-text">{{ cssCode }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import Navbar from '@/components/Navbar.vue';

// 旋转状态
const transformState = ref({
	rotateX: 0,
	rotateY: 0,
	rotateZ: 0
});

// 触摸相关状态
let isDragging = false;
let lastTouchX = 0;
let lastTouchY = 0;
let startRotateX = 0;
let startRotateY = 0;

// 计算样式
const transformStyle = computed(() => ({
	transform: `rotateX(${transformState.value.rotateX}deg) rotateY(${transformState.value.rotateY}deg) rotateZ(${transformState.value.rotateZ}deg)`
}));

// 计算CSS代码
const cssCode = computed(() => {
	return `transform: rotateX(${transformState.value.rotateX}deg) rotateY(${transformState.value.rotateY}deg) rotateZ(${transformState.value.rotateZ}deg);`;
});

// 触摸事件处理
const handleTouchStart = (e) => {
	isDragging = true;
	const touch = e.touches[0];
	lastTouchX = touch.clientX;
	lastTouchY = touch.clientY;
	startRotateX = transformState.value.rotateX;
	startRotateY = transformState.value.rotateY;
};

const handleTouchMove = (e) => {
	if (!isDragging) return;
	
	const touch = e.touches[0];
	const deltaX = touch.clientX - lastTouchX;
	const deltaY = touch.clientY - lastTouchY;
	
	// 计算旋转角度（灵敏度可调整）
	const sensitivity = 0.5;
	const newRotateY = startRotateY + deltaX * sensitivity;
	const newRotateX = startRotateX - deltaY * sensitivity;
	
	// 限制角度范围
	transformState.value.rotateY = Math.max(-180, Math.min(180, newRotateY));
	transformState.value.rotateX = Math.max(-180, Math.min(180, newRotateX));
	
	// 更新起始位置
	lastTouchX = touch.clientX;
	lastTouchY = touch.clientY;
	startRotateX = transformState.value.rotateX;
	startRotateY = transformState.value.rotateY;
};

const handleTouchEnd = (e) => {
	isDragging = false;
};

// 滑动条事件处理
const onRotateXChange = (e) => {
	transformState.value.rotateX = e.detail.value;
};

const onRotateYChange = (e) => {
	transformState.value.rotateY = e.detail.value;
};

const onRotateZChange = (e) => {
	transformState.value.rotateZ = e.detail.value;
};

// 快速旋转控制
const rotateX = () => {
	transformState.value.rotateX += 45;
	if (transformState.value.rotateX > 180) {
		transformState.value.rotateX = -180;
	}
};

const rotateY = () => {
	transformState.value.rotateY += 45;
	if (transformState.value.rotateY > 180) {
		transformState.value.rotateY = -180;
	}
};

const rotateZ = () => {
	transformState.value.rotateZ += 45;
	if (transformState.value.rotateZ > 180) {
		transformState.value.rotateZ = -180;
	}
};

const resetTransform = () => {
	transformState.value = {
		rotateX: 0,
		rotateY: 0,
		rotateZ: 0
	};
};
</script>

<style scoped lang="scss">
.test-page {
	@include page-with-header;
	min-height: 100vh;
	background: #172869;
}

.test-content {
	display: flex;
	flex-direction: column;
	gap: 40rpx;
	padding: 32rpx;
}

.test-section {
	background: #2e3d78;
	padding: 32rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 24rpx;
	display: block;
}

.test-area {
	min-height: 200rpx;
	padding: 24rpx;
	padding-top: 100rpx;
	background: #1a2a5a;
	margin-top: 16rpx;
	display: flex;
	flex-direction: column;
	gap: 40rpx;
	align-items: center;
	justify-content: center;
}

.transform-container {
	perspective: 1000rpx;
	margin-bottom: 20rpx;
}

// 基础3D旋转文字
.text-3d-rotate {
	font-size: 48rpx;
	font-weight: bold;
	color: #4fd2ff;
	text-shadow: 
		2rpx 2rpx 0 #1a2a5a,
		4rpx 4rpx 0 #0f1a3a,
		6rpx 6rpx 0 #050a1a;
	letter-spacing: 4rpx;
	transition: transform 0.1s ease;
	display: inline-block;
	user-select: none;
	
	&:active {
		transition: none;
	}
}


// 旋转控制区域
.rotation-controls {
	width: 100%;
	max-width: 600rpx;
	display: flex;
	flex-direction: column;
	gap: 30rpx;
	margin-top: 60rpx;
}

.control-item {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.control-label {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.label-text {
	font-size: 28rpx;
	color: #fff;
	font-weight: bold;
}

.angle-value {
	font-size: 24rpx;
	color: #4fd2ff;
	font-weight: bold;
	background: rgba(79, 210, 255, 0.1);
	padding: 8rpx 16rpx;
}

.rotation-slider {
	width: 100%;
}

.transform-controls {
	display: flex;
	gap: 15rpx;
	flex-wrap: wrap;
	justify-content: center;
}

.control-btn {
	background: linear-gradient(135deg, #1ec8e1 0%, #5ebeff 100%);
	color: #fff;
	padding: 12rpx 20rpx;
	font-size: 24rpx;
	font-weight: bold;
}

// 代码显示区域
.code-display {
	width: 100%;
	max-width: 600rpx;
	background: #0f1a3a;
	padding: 20rpx;
}

.code-title {
	font-size: 24rpx;
	color: #4fd2ff;
	font-weight: bold;
	margin-bottom: 16rpx;
	display: block;
}

.code-content {
	background: #050a1a;
	padding: 16rpx;
}

.code-text {
	font-size: 22rpx;
	color: #00ff88;
	font-family: 'Courier New', monospace;
	word-break: break-all;
	line-height: 1.5;
}
</style>
